<template>
  <div id="watch-example">
    <p>
      Ask a yes/no question:
      <input v-model="question">
    </p>
    <p>{{ answer }}</p>
    <p>{{ answer2 }}</p>
    <child-component></child-component>
    <child-component>
        <p>父组件给你写点东西吧。</p>
    </child-component>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
export default {

  data() {
    return {
      question: '',
      answer: 'I cannot give you an answer until you ask a question!',
      answer2:'11'
    }
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = this.getAnswer
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        this.answer2=this.question.indexOf('!')!==-1
        return
      }
      if(this.question.indexOf('!')!==-1){
        this.answer2='indexOf!!'
        return
      }
      this.answer = 'Thinking...'
    }
  }
  // export default {
//   name: 'MenuItem',
//   functional: true,
//   props: {
//     title: {
//       type: String,
//       default: ''
//     }
//   },
//   render(h, context) {
//     const { title } = context.props
//     const vnodes = []

//     if (title) {
//       vnodes.push(<span slot='title'><span>{(title)}</span></span>)
//     }

//     return vnodes
//   }
// }
}

</script>

<style scoped>
</style>
